<!--************************************
   Author: Sean,Lin
   E-mail:  xiangx.lin@intel.com
   Date:2015-09-10
   Descrption: 
************************************-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CeTune</title>
 
<link rel="stylesheet" type="text/css" href="../static/css/Style.css">
<link rel="stylesheet" type="text/css" href="../static/css/TableStyle.css">
<link rel="stylesheet" type="text/css" href="../static/css/NavStyle.css">
<link rel="stylesheet" type="text/css" href="../static/css/markdown.css">
<link rel="stylesheet" type="text/css" href="../static/css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="../static/css/xlstablefilter.css">
<link rel="stylesheet" type="text/css" href="../static/css/jquery.resizableColumns.css">

<link rel="stylesheet"  href="../static/bootstrap3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/bootstrap3.3.5/css/bootstrap-theme.min.css">


<script src="../static/js/jquery.js"></script>
<script src="../static/js/src/jquery.table2excel.js"></script>
<script src="../static/js/store.js"></script>
<script src="../static/js/jquery.resizableColumns.min.js"></script>

<script src="../static/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../static/js/jquery.xlstablefilter.js"></script>
<script type="text/javascript" src="../static/bootstrap3.3.5/js/bootstrap.js"></script>
<script type="text/javascript" src="../static/js/Common.js"></script>
<script type="text/javascript" src="../static/js/Script.js"></script>


</head>

<body>
 <div id="div_main_id" class="container">
   <div id="div_menu_id">
     <ul>
      <li id="Configuration_id" title="Configuration"><a id="menu_Configuration_id">Test Configuration</a></li>
      <li id="Status_id" title="Status"><a id="menu_Status_id">CeTune Status</a></li>
      <li id="Reports_id" title="Reports"><a id="menu_Reports_id">Result Reports</a></li>
      <li id="Description_id" title="Description"><a id="menu_help_id">Help</a></li>
     </ul>
   </div>

   <div id="div_top_id">
    <div id="div_top_title_id">
       <h1><a href="#">CeTune -- Ceph tuning and profiling</a></h1>
    </div>
     <div id="div_top_status_id">
     <!--
       <h1>Benchmark is runing.....</h1>
	-->
       <h1>CeTune Status: idle Ceph Status: None</h1>
       <h6 class='ceph_thr'></h6>
      <!-- <h1><a href="#"><img id="img_top_id" src="image/progruss.jpg" />Benchmark is runing.....</a></h1>-->
    </div>
    <div id="div_user_status_id">
        <tr id=""><label id="label_username_id"></label><td><img id="img_username_id" title="user:{{ username }}" src="../static/login/img/userpic1.png"></td><td><a href="/logout">Sign out >></a></td></tr>
    </div>
   </div>

   <div id="div_Content_id">
   <div id="div_Configuration" class = "div_tab_class">
     
     <div id = "div_Configuration_left_id" class="div_content_left_class">
        <div id ='div_sidebar_id'>
             <div>
                <dl id="dl_Configuration_left_nav_accordion_id">
                    <dt id="dt_Configuration_left_active_id">
                       <div>CeTune</div>
                    </dt>
             
                    <dd>
                      <div>
                        <h4><div><input type="checkbox" class="check_control_class" title="deploy"  onclick="ExecutvieCheck(event)">   Deploy</div></h4>            
                        <ul>           
                          <li class="div_Configuration_left_nav_li_class"><a id="cluster" href="#" onclick="$('.div_Configuration_left_nav_li_class a').removeClass('active');$(this).addClass('active');"><img title="true" class="img_Configuration_class" src="../static/image/config_OK.gif">Cluster Configuration</a></li>
                          <li class="div_Configuration_left_nav_li_class"><a id="ceph_hard_config" href="#" onclick="$('.div_Configuration_left_nav_li_class a').removeClass('active');$(this).addClass('active');"><img title="true" class="img_Configuration_class" src="../static/image/config_OK.gif">Ceph Configuration</a></li>      
                        </ul> 
                      </div>
                 
                      <div>
                        <h4><div><input type="checkbox" class="check_control_class"  title="benchmark" onclick="ExecutvieCheck(event)">   Benchmark</div></h4>          
                        <ul>           
                          <li  class="div_Configuration_left_nav_li_class"><a id="workflow" href="#" onclick="$('.div_Configuration_left_nav_li_class a').removeClass('active');$(this).addClass('active');"><img title="true" class="img_Configuration_class" src="../static/image/config_OK.gif">Executvie Configuration</a></li>
                          <li  class="div_Configuration_left_nav_li_class"><a id="system" href="#" onclick="$('.div_Configuration_left_nav_li_class a').removeClass('active');$(this).addClass('active');"><img title="true" class="img_Configuration_class" src="../static/image/config_OK.gif">System Configuration</a></li>
                          <li  class="div_Configuration_left_nav_li_class"><a id="ceph_tuning" href="#" onclick="$('.div_Configuration_left_nav_li_class a').removeClass('active');$(this).addClass('active');"><img title="true" class="img_Configuration_class" src="../static/image/config_OK.gif">Ceph Tuning</a></li>
                          <li  class="div_Configuration_left_nav_li_class"><a id="benchmark" href="#" onclick="$('.div_Configuration_left_nav_li_class a').removeClass('active');$(this).addClass('active');"><img title="true" class="img_Configuration_class" src="../static/image/config_OK.gif">Benchmark Configuration</a></li>
                          <li class="div_Configuration_left_nav_li_class"><a  id="analyzer" href="#" onclick="$('.div_Configuration_left_nav_li_class a').removeClass('active');$(this).addClass('active');"><img title="true" class="img_Configuration_class" src="../static/image/config_OK.gif">Analyzer Configuration</a></li>           
                        </ul> 
                      </div>
                  
                    </dd>
                                 
                </dl>
              </div>
        </div>
         
         <div id="div_Configuration_left_execButton_id">
             <input id="bnt_Configuration_exec_id" class="btn btn-primary btn-lg" type="button" value="Execute"/>
         </div>     
     </div>
     
     
     
     <div id = "div_Configuration_right_id" class="div_content_right_class">

         <div id="div_Configuration_right_top_id">
            <div id="div_Configuration_right_top_titel_id">Benchmark Configuration</div>
            <div id="div_Configuration_right_top_button_id">              
              <!-- <input id="bnt_Confguration_more_id" class="bnt_Confguration_tableOper_class" type="button" value="More"/>
              <input id="bnt_Confguration_delete_id" class="bnt_Confguration_tableOper_class" type="button" value="Delete" onclick="Del()"/>
              <input id="bnt_Confguration_add_id" class="bnt_Confguration_tableOper_class" type="button" value="Add"/>-->
              
          <!--    <input id="bnt_Confguration_more_id" class="bnt_Confguration_tableOper_class" type="button" value="More"/>
              <input id="bnt_Confguration_delete_id" class="bnt_Confguration_tableOper_class" type="button" value="Delete" onclick="Del()"/>
              <input id="bnt_Confguration_add_id" class="bnt_Confguration_tableOper_class" type="button" value="Add"/>-->
              
              <button id="bnt_Confguration_delete_id" type="button" class="btn btn-primary" data-toggle="modal"  data-target="#DeleteModal" data-whatever="@mdo">Delete</button>
              <button  id="bnt_Confguration_add_id" type="button" class="btn btn-primary" data-toggle="modal" data-target="#ConfigurationModal" data-whatever="@mdo">Add</button>
               
             <!-- <button id="bnt_Confguration_more_id" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">More</button>-->
             
              
             
            </div>
            <div id="div_Configuration_right_table_id">
            </div>
            <div id="div_Configuration_right_back_id">Read-Only During Running</div>              
         </div>
     </div>
     
     
  </div>
  
   <div id="div_Status" class = "div_tab_class">
     <div id = "div_Status_left_id" class="div_content_left_class">
        <div id ='div_sidebar_id_status'>
          <div>
             <dl id="dl_Status_left_nav_accordion_id">
                <dt>
                  <div>CeTune</div>
                </dt>
                <!--------------->
                <dd>
                   <div>
                       <ul>           
                          <li class="div_Status_left_nav_li_class"><a id="Cetune_Status" href="#">CeTune Status</a></li>
                          <!--<li class="div_Configuration_left_nav_li_class"><a id="ceph_hard_config" href="#"><img title="true" class="img_Configuration_class" src="image/config_OK.gif">Ceph Configuration</a></li>-->  
                        </ul> 
                   </div>
                </dd>
             </dl>
          </div>
        </div>
        <div id = "div_Status_left_button">
        <input id="bnt_Configuration_cancel_one" class="btn btn-primary btn-lg" type="button" value="Cancel One"/>
        <input id="bnt_Configuration_cancel_all" class="btn btn-primary btn-lg" type="button" value="Cancel All"/>
        </div>
     </div>
     <div id = "div_Status_right_id" class="div_content_right_class">
        <div id="div_console_id">
        </div>
     </div>
       
  </div>
  
   <div id="div_Reports" class = "div_tab_class">
     <!--<div id = "div_Reports_left_id" class="div_content_left_class"></div>
     <div id = "div_Reports_right_id" class="div_content_right_class">div_Reports_id</div>-->
   </div>
   <div id="div_Description" class = "div_tab_class">
       <div id = "div_Helper_left_id" class="div_content_left_class">
           <div id="div_sidebar_id_helper">
               <div>
                   <dl id="dl_Helper_left_nav_accordion_id">
                       <dt><div>CeTune</div></dt>
                       <dd><div>
                           <ul>           
                               <li class="div_Helper_left_nav_li_class">
                               <a class="active a_helper_class" href="#h3_helper_user_guide_id" onclick="$('.a_helper_class').removeClass('active');$(this).addClass('active');">User Guide</a>
                               <ul id="ul_user_guide" class="sub_ul"></ul>
                               </li>
                               <li class="div_Helper_left_nav_li_class"><a class="a_helper_class" href="#h3_helper_manual_id" onclick="$('.a_helper_class').removeClass('active');$(this).addClass('active');">Configuration reference manual</a>
                               <ul id="ul_manual" class="sub_ul"></ul>
                               </li>
                           </ul>
                       </div></dd>
                   </dl>
               </div>
            </div>
       </div>
       <div class="div_content_right_class">
           <div id="h3_helper_user_guide_id" style="position:relative; top:-75px"></div>
           <h3 style="font-weight:bold; line-height:50px; border-bottom:2px solid #999">User Guide</h3>
           <div id="div_Markdown" class = "markdown-body"></div>
           <div id="h3_helper_manual_id" style="position:relative; top:-75px"></div>
           <h3 style="font-weight:bold">Configuration reference manual</h3>
           <div id="div_Help" class = "div_help_class"></div>
       </div>
   </div>
  
  </div>

   <div id="div_buttom_id"></div>
  </div>

 </div>

<!---------------------------------------- Model Window---------------------------------------------------------->

<div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
       
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel_delete">Are you sure delete thers rows?</h4>
      </div>
      
       <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="DeleteModal_OK" onclick="DeleteModal_OK('configuration')">Apply</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>        
      </div>
       
    </div>
  </div>
</div>
<div class="modal fade" id="DeleteResultReportModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
       
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel_delete">Are you sure delete thers rows?</h4>
      </div>
      
       <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="DeleteModal_OK" onclick="DeleteModal_OK('resultreport')">Apply</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>        
      </div>
       
    </div>
  </div>
</div>

<div class="modal fade" id="DeleteBenchmarkModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
       
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel_BenchmarkModal">Are you sure delete thers rows?</h4>
      </div>
      
       <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="DeleteModal_OK" onclick="DeleteModal_OK('benchmark')">Apply</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>        
      </div>
       
    </div>
  </div>
</div>

<!----------------------------------------------------------------------------------------------------------------------------------->

<div class="modal fade" id="ConfigurationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
       
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel_Configuration_Add">Add a new row for configuration</h4>
      </div>
      
      
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-key" class="control-label">Key:</label>
            <input type="text" class="form-control" id="recipient-key">
          </div>
           
          <div class="form-group">
            <label for="message-value" class="control-label">Value:</label>
            <!--<textarea class="form-control" id="message-text"></textarea>-->
             <input type="text" class="form-control" id="recipient-value">
          </div>
          

          
        </form>
      </div>
      
       <div class="div_message_class" id="div_configuration_message_div">
          <h5><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
              <span class="sr-only">Error:</span>Input box can't be empty!<small> please input</small>
          </h5>
       </div>
       <div class="modal-footer">  
        <button type="button" class="btn btn-primary" id="ConfigurationModal_OK" onclick="ConfigurationModal_OK()">OK</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>        
      </div>
       
    </div>
  </div>
</div>


<div class="modal fade" id="BenchmarkModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
       
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel_Benchmark_Add">Add a new row for benchmark</h4>
      </div>
      
      
      <div class="modal-body">
        <form>
          <div class="form-group">
              <label for="recipient_benchmark_engine" class="control-label">benchmark_driver:</label>
              <label class="testcase-dialog-description">options: qemurbd, fiorbd, cosbench, generic, hook, vdbench</label>
              <select name="select" id="recipient_benchmark_engine" class="form-control" onchange="Select_Value()">
                  <option>qemurbd</option>
                  <option>fiorbd</option>
                  <option>cosbench</option>
                  <option>generic</option>
                  <option>hook</option>
                  <option>vdbench</option>
              </select>
          </div>
          
          <div class="form-group">
            <label for="message-dsc" class="control-label">worker:</label>
            <label class="testcase-dialog-description" id="worker">example: 140</label>
            <!--<textarea class="form-control" id="message-text"></textarea>-->
             <input type="text" class="form-control" id="recipient_worker">
          </div>
          
          <div class="form-group">
            <label for="message-value" class="control-label">container_size:</label>
            <label class="testcase-dialog-description" id="container_size">example: 10g</label>
            <!--<textarea class="form-control" id="message-text"></textarea>-->
             <input type="text" class="form-control" id="recipient_container_size">
          </div>
          
          <div class="form-group">
            <label for="message-value" class="control-label">iopattern:</label>
            <label class="testcase-dialog-description" id="iopattern">example: seqwrite,seqread,randwrite,randread,readwrite,randrw</label>
            <!--<textarea class="form-control" id="message-text"></textarea>-->
             <input type="text" class="form-control" id="recipient_io_pattern">
          </div>
          
           <div class="form-group">
            <label for="message-value" class="control-label">opsize:</label>
            <label class="testcase-dialog-description" id="opsize">example: 4k</label>
            <!--<textarea class="form-control" id="message-text"></textarea>-->
             <input type="text" class="form-control" id="recipient_block_size">
          </div>
          
           <div class="form-group">
            <label for="message-value" class="control-label">object_size/QD:</label>
            <label class="testcase-dialog-description" id="object_size_QD">example: 64</label>
            <!--<textarea class="form-control" id="message-text"></textarea>-->
             <input type="text" class="form-control" id="recipient_work_depth">
          </div>
          
          
           <div class="form-group">
            <label for="message-value" class="control-label">rampup(sec):</label>
            <label class="testcase-dialog-description" id="rampup">example: 100</label>
            <!--<textarea class="form-control" id="message-text"></textarea>-->
             <input type="text" class="form-control" id="recipient_ramup_time">
          </div>
          
           <div class="form-group">
            <label for="message-value" class="control-label">runtime(sec):</label>
            <label class="testcase-dialog-description" id="runtime">example: 400</label>
            <!--<textarea class="form-control" id="message-text"></textarea>-->
             <input type="text" class="form-control" id="recipient_run_time">
          </div>
          
           <div class="form-group">
            <label for="message-value" class="control-label">Parameter</label>
            <label class="testcase-dialog-description" id="Parameter">example: rbd </label>
            <!--<textarea class="form-control" id="message-text"></textarea>-->
            <input type="text" class="form-control" id="recipient_parameter">
          </div>
          
           <div class="form-group">
            <label for="message-value" class="control-label">Tag/Description:</label>
            <label class="testcase-dialog-description" id="Tag_Description">example: librados_4MB_write</label>
            <!--<textarea class="form-control" id="message-text"></textarea>-->
             <input type="text" class="form-control" id="recipient_desc">
          </div>

          <div class="form-group">
              <label for="additional_option" class="control-label">additional_option:</label>
              <label class="testcase-dialog-description" id="additional_option_label">example: restart,redeploy,resetPerf</label>
              <select name="select" id="additional_option_select" class="form-control">
                  <option>null</option>
                  <option>restart</option>
                  <option>redeploy</option>
                  <option>resetPerf</option>
              </select>
          </div>
          
        </form>
      </div>
       <div class="div_message_class" id="div_benchmark_message_div"  role="alert">
          
           <h5> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                <span class="sr-only">Error:</span>Input box can't be empty!<small> please input</small>
           </h5>
       </div>
      
       <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="BenchmarkModel_OK" onclick="BenchMarkModel_OK()">OK</button> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>           
      </div>
       
    </div>
  </div>
</div>




    <div id="myShow" style="display:none;">
        <img alt="loading" src="../static/image/ajax-loader_1.gif"/>
    </div>
</body>

</html>
